---
id: use-spacing
title: useSpacing
---

`useSpacing` takes a numeric value, that is multiplied by the `spacing` value defined in `StacksProvider`.

### TypeScript

```typescript
const useSpacing: (value: number | null | undefined) => number
```

### ReScript

```typescript
let useSpacing: option<float> => float
```

### Basic usage

```jsx live showCode
const styles = StyleSheet.create({
  root: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
    alignItems: 'center',
    justifyContent: 'center',
    height: 24,
  },
})

const DebugBox = props => {
  const { marginBottom, children } = props
  const margin = useSpacing(marginBottom)

  return (
    <View style={[styles.root, { marginBottom: margin }]}>
      <Typography variant="body">{children}</Typography>
    </View>
  )
}

const App = () => {
  return (
    <StacksProvider spacing={4}>
      <DebugBox marginBottom={4}>Hello</DebugBox>
      <DebugBox marginBottom={8}>World</DebugBox>
      <DebugBox />
    </StacksProvider>
  )
}

render(<App />)
```
